﻿@model List<Entity.Appointment>
@{
    ViewBag.Title = "Calendar";
}


@section breadcrumb
{
    <li>@Html.ActionLink("Calendar", "Index", "Appointment")</li>
}
<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">Calendar</h3>
            </div>

            <!-- /.box-header -->
            <div class="box-body">
                <div style="float: left; width: 250px;">
                    <div id="nav">
                        <div id="dateSelect" style="border: 1px solid #cccccc"></div>
                        <div style="padding-top: 10px;">
                            <button class="btn btn-primary" id="createEvent"><span class="glyphicon glyphicon-plus"></span>Add new</button></div>
                    </div>
                </div>
                <div style="margin-left: 270px;">
                    <div id="dp"></div>
                </div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
</div>

@section Script
{
    <script type="text/javascript" src="/Scripts/daypilot-all.min.js"></script>
    <script type="text/javascript" src="/Content/js/plugins/datepicker/locales/bootstrap-datepicker.vi.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="/Content/fancybox/source/jquery.fancybox.js?v=2.1.5"></script>
    <link rel="stylesheet" type="text/css" href="/Content/fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />

    <!-- Add Button helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="/Content/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
    <script type="text/javascript" src="/Content/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

    <!-- Add Thumbnail helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="/Content/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
    <script type="text/javascript" src="/Content/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

    <!-- Add Media helper (this is optional) -->
    <script type="text/javascript" src="/Content/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

    <script type="text/javascript">

        var dp = new DayPilot.Calendar("dp");

        //dp.cellDuration = 120;
        //dp.timeHeaderCellDuration = 120;
        //dp.cellHeight = 60;

        // view
        dp.startDate = '@DateTime.Now.AddDays(-2).ToString("yyyy-MM-dd")';  // or just dp.startDate = "2013-03-25";
        //dp.viewType = "Week";
        dp.days = 50;
        dp.allDayEventHeight = 25;
        dp.initScrollPos = 9 * 40;

        dp.columnWidthSpec = "Fixed";
        dp.columnWidth = 100;
        //dp.locale = "vi-vn";
        dp.heightSpec = "Fixed";
        dp.height = 500;
        dp.eventDeleteHandling = "Update";
        dp.onEventDelete = function (args) {
            if (!confirm("Do you really want to delete this event?")) {
                args.preventDefault();
            } else {
                $.ajax({
                    url: "@Url.Action("Delete","Appointment")",
                    data: { id: args.e.id()}
                });
            }
        };

        dp.onEventDeleted = function (args) {
            dp.message("Deleted event: " + args.e.text());
        };

        // bubble, with async loading
        /*dp.bubble = new DayPilot.Bubble({
            onLoad: function(args) {
                var ev = args.source;
                //alert("event: " + ev);
                args.async = true;  // notify manually using .loaded()
                
                // simulating slow server-side load
                setTimeout(function() {
                    args.html = "testing bubble for: <br>" + ev.text();
                    args.loaded();
                }, 500);
            }
        });
        */

        /*dp.contextMenu = new DayPilot.Menu({
            items: [
            {text:"Show event ID", onclick: function() {alert("Event value: " + this.source.value());} },
            {text:"Show event text", onclick: function() {alert("Event text: " + this.source.text());} },
            {text:"Show event start", onclick: function() {alert("Event start: " + this.source.start().toStringSortable());} },
            {text:"Delete", onclick: function() { dp.events.remove(this.source); } }
        ]});*/

        // event moving
        dp.onEventMoved = null;
        dp.eventMoveHandling = null;

        // event resizing
        dp.onEventResized = null;
        dp.eventResizeHandling = null;

        // event creating
        dp.onTimeRangeSelected = function (args) {
            /*var name = prompt("New event name:", "Event");
            if (!name) return;
            var e = new DayPilot.Event({
                start: args.start,
                end: args.end,
                id: DayPilot.guid(),
                resource: args.resource,
                text: "Event"
            });
            dp.events.add(e);
            dp.clearSelection();
            dp.message("Created");*/
        };

        dp.onTimeRangeDoubleClicked = function (args) {
            //var name = prompt("New event name:", "Event");
            //if (!name) return;
            //var e = new DayPilot.Event({
            //    start: args.start,
            //    end: args.end,
            //    id: 1,
            //    resource: args.resource,
            //    text: "Event"
            //});
            //dp.events.add(e);
            //dp.clearSelection();
            //dp.message("Created");
            Add();
        };

        dp.onEventClick = function (args) {
            //alert("clicked: " + args.e.id());
            Edit(args.e.id());
        };

        dp.showEventStartEnd = true;

        dp.init();

        //var e = new DayPilot.Event({
        //    start: new DayPilot.Date("2015-01-27 10:30"),
        //    end: new DayPilot.Date("2015-01-27 12:30"),
        //    id: 2,
        //    text: "Special event"
        //});
        //dp.events.add(e);
        $.ajax({
            type: "POST",
            url: "@Url.Action("GetAppointment","Appointment")",
                success:function(data){
                    if (data != null && data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            var event = data[i];
                            var e = new DayPilot.Event({
                                start: new DayPilot.Date(event.StartDate),
                                end: new DayPilot.Date(event.EndDate),
                                id: event.Id,
                                text: event.Title
                            });
                            dp.events.add(e);
                        }
                    }
                }
            });
    </script>

    <script type="text/javascript">
        
        $("#dateSelect").datepicker({
            //language: 'vi'
        }).on('changeDate', function (e) {
            dp.startDate = e.format('yyyy-mm-dd');
            dp.update();
        });

        $(document).ready(function () {
            $($(".calendar_default_corner").children()[1]).remove();
            
            $("#createEvent").click(function () {
                Add();
            });
        });

        function Add() {
            $.fancybox.open({
                href: '/appointment/create',
                type: 'iframe',
                padding: 0,
                'frameHeight': 200,
            });
        }
        
        function Edit(id) {
            $.fancybox.open({
                href: '/appointment/edit/' + id,
                type: 'iframe',
                padding: 0,
            });
        }

        function addEvent(event) {
            var e = new DayPilot.Event({
                start: new DayPilot.Date(event.StartDate),
                end: new DayPilot.Date(event.EndDate),
                id: event.Id,
                text: event.Title
            });
            dp.events.add(e);
            dp.message("Created event: " + event.Title);
        }

        function editEvent(event) {
            var e = dp.events.find(event.Id);
            e.text(event.Title);
            e.start(event.StartDate);
            e.end(event.EndDate);
            dp.events.update(e);
            dp.message("Update event: " + event.Title);
        }
        
        function deleteEvent(id) {
            var e = dp.events.find(id);
            dp.events.remove(e);
        }
    </script>
    <style>
        .fancybox-inner {
            height: 550px !important;
        }
    </style>
}